<template>
  <div class="k-line-view">
    <p style="color: #fff">
      当前为个人对接火币网合约的前端DEMO，个人量化策略版本测试中，不开源
    </p>
    <p style="color: #fff">
      首屏与蜡烛周期切换 web socket，视图刷新有2-3s的延迟，Demo未做优化（K线库使用 vite 导入时，有兼容问题）
    </p>
    <div class="k-view-title">
      <span style="color: #fff">当前币种：{{ SymbolCoin }}</span>
    </div>

    <div class="k-line-btn-box">
      <span class="k-line-type-title">蜡烛周期：</span>
      <template v-for="(item, index) of candlePeriodArray">
        <button class="k-line-time" :class="{ 'k-line-btn-active': typeIndex === index }" @click="ChangePeriod(index)">
          {{ candlePeriodNameArray[index] }}
        </button>
      </template>
    </div>
    <div id="technical-indicator-k-line" class="k-line-chart" />

    <!-- <Kline /> -->

    <div class="k-line-btn-box">
      <span class="k-line-type-title">蜡烛图-主指标：</span>
      <template v-for="item of candleIndicatorArray">
        <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start">
          <button :class="{ 'k-line-btn-active': candleType === item.type }" class="k-line-indicator" @click="ChangeTndicatorType(0, item.type)">
            {{ item.type }}
          </button>
        </el-tooltip>
      </template>
    </div>

    <div class="k-line-btn-box">
      <span class="k-line-type-title">走势图-副指标：</span>
      <template v-for="(item, index) of subIndicatorArray">
        <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start">
          <button :class="{ 'k-line-btn-active': subType === item.type }" class="k-line-indicator" @click="ChangeTndicatorType(1, item.type)">
            {{ item.type }}
          </button>
        </el-tooltip>
      </template>
    </div>
  </div>
</template>

<script>
import useKLineView from './api/KlineView.js'
import useKlineIndicator from './api/KlineIndicator.js'
import useKlineGet from './api/KlineGet.js'
import useKlineUpdate from './api/KlineUpdate.js'
import useMarketDepth from './api/MarketDepth.js'

import { ref, defineComponent } from 'vue'
export default defineComponent({
  components: {
    useKLineView,
    useKlineIndicator,
    useKlineGet,
    useKlineUpdate,
    useMarketDepth
  },

  setup() {
    const KlineView = useKLineView()
    const KlineGet = useKlineGet()
    const KlineIndicator = useKlineIndicator(KlineView)
    const KlineUpdate = useKlineUpdate(KlineView)
    const MarketDepth = useMarketDepth()
    return {
      ...KlineView,
      ...KlineIndicator,
      ...KlineGet,
      ...KlineUpdate,
      ...MarketDepth
    }
  },
  mounted() {
    this.init()
  },
  data: () => {
    return {
      /* GET HUOBI */
      SymbolCoin: 'ETH-USDT',
      Depth: '',
      typeIndex: 0, // 蜡烛图-周期
      candleType: 'MA', // 蜡烛图-均线指标
      subType: 'MACD', // 副图-均线指标
      candlePeriodArray: ['1min', '5min', '15min', '30min', '60min', '4hour', '1day', '1week', '1mon'],
      candlePeriodNameArray: ['1分', '5分', '15分', '30分', '1时', '4时', '1日', '1周', '1月'],

      candleIndicatorArray: [
        {
          type: 'MA',
          title: '平均移动线'
        },
        {
          type: 'EMA',
          title: '指数移动平均值'
        },
        {
          type: 'SAR',
          title: '抛物线指标'
        },
        {
          type: 'BOLL',
          title: '布林线'
        }
      ],
      subIndicatorArray: [
        {
          type: 'VOL',
          title: '成交量'
        },
        {
          type: 'MACD',
          title: '指数平滑移动平均线'
        },
        {
          type: 'KDJ',
          title: '随机指标'
        },
        {
          type: 'BOLL',
          title: '布林线'
        }
      ]
      /* GET HUOBI End */
    }
  },
  methods: {
    setSymbolCoin() {
      localStorage.setItem('SymbolCoin', this.SymbolCoin)
    },
    getSymbolCoin() {
      return localStorage.getItem('SymbolCoin')
    },
    /** 页面初始化 **/
    async init() {
      this.setSymbolCoin()
      this.initKline()
      this.setCandleTechnicalIndicator(this.candleType)
      this.setSubTechnicalIndicator(this.subType)
    },

    /** K线 初始化 **/
    async initKline() {
      let klineParams = {}
      klineParams.symbol = this.SymbolCoin
      klineParams.period = this.typeIndex

      let depthParams = {}
      depthParams.symbol = this.SymbolCoin
      depthParams.period = this.Depth

      await this.ReqRequestWsKline(klineParams, this.reqKlineHistoryData)

      if (!this.subKlineSocket) {
        //  行情
        await this.SubRequestWsKline(klineParams, this.subKlineNewestData)
        //  深度
        // this.SubRequestWsDepth(depthParams, this.ThrottleGetDepth);
      }
    },

    /** 变更K线时间周期 **/
    async ChangePeriod(typeIndex) {
      this.typeIndex = typeIndex
      await this.initKline()
    },

    /** 变更技术指标 **/
    ChangeTndicatorType(typeIndex, type) {
      if (!typeIndex) {
        this.candleType = type
        this.setCandleTechnicalIndicator(type)
      } else {
        this.subType = type
        this.setSubTechnicalIndicator(type)
      }
    }
  }
})
</script>

<style>
.k-line-view {
  padding: 16px;
  background: #191b2a;
}
.k-view-title {
  height: 40px;
}
.k-line-type-title {
  margin: 0 10px;
  font-size: 14px;
}
.k-line-btn-box {
  margin-bottom: 10px;
  color: #eee;
}
.k-line-btn-active {
  border-color: #4da699 !important;
  color: #4da699 !important;
}

.k-line-time,
.k-line-indicator {
  cursor: pointer;
  color: #61688a;
  border: 1px solid;
  margin-right: 4px;
  background: transparent;
}
.k-line-indicator {
  width: 60px;
}
.k-line-chart {
  height: 458px;
  width: 962px;
}
</style>
